// 通用样式（原子性样式）
// 下方打开popup样式
.van-popup--bottom {
    height: 40%;
    .popup__container {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .popup__header {
        display: flex;
        justify-content: space-between;
        height: 50px;
        font-size: 14px;
        font-weight: 600;
        line-height: 50px;
        padding: 0 10px;
        .cancel {
            color: var(--van-picker-cancel-action-color);
        }
        .confirm {
            color: var(--van-picker-confirm-action-color);
        }
    }
    .popup__content {
        height: calc(100% - 50px);
    }
}

#application-body {
	//  外边距
	@spacing-outer: outernone, outersmall, outermedium, outerlarge;

	//  内边距
	@spacing-inner: innernone, innersmall, innermedium, innerlarge;

	@spacing-px: 0px, 8px, 16px, 24px;

	//  间隔模式
	.spacing {
		&-top {
			each(@spacing-outer, {
      &--@{value} {
        margin-top: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-top: extract(@spacing-px, @index);
      }
    });
		}
		&-right {
			each(@spacing-outer, {
      &--@{value} {
        margin-right: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-right: extract(@spacing-px, @index);
      }
    });
		}
		&-bottom {
			each(@spacing-outer, {
      &--@{value} {
        margin-bottom: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-bottom: extract(@spacing-px, @index);
      }
    });
		}
		&-left {
			each(@spacing-outer, {
      &--@{value} {
        margin-left: extract(@spacing-px, @index);
      }
    })
    each(@spacing-inner, {
      &--@{value} {
        padding-left: extract(@spacing-px, @index);
      }
    });
		}
	}

	//  自身对齐方式
	.self {
        //  垂直对齐
        &-valign {
          &--middle {
              margin-top: auto;
              margin-bottom: auto;
          }
          &--bottom {
              margin-top: auto;
          }
      }
      //  水平对齐
      &-halign {
          &--left {
              align-self: flex-start;
              margin-right: auto;
          }
          &--center {
              align-self: center;
              margin-left: auto;
              margin-right: auto;
          }
          &--right {
              align-self: flex-end;
              margin-left: auto;
          }
      }
	}

	// flex 布局样式
	.flex-element {
		display: flex;

		@flex-dir: row, row-reverse, column, column-reverse;
		@flex-align: flex-start, center, flex-end, space-between;
		@flex-valign: flex-start, center, flex-end;

		// flex 方向
		each(@flex-dir, {
      &.flex-dir--@{value} {
        flex-direction: @value;
      }
    });

		// flex 水平对齐
		each(@flex-align, {
      &.flex-align--@{value} {
        justify-content: @value;
      }
    });

		// flex 垂直对齐
		each(@flex-valign, {
      &.flex-valign--@{value} {
        align-items: @value;
      }
    });
	}

	@text-halign: left, center, right, justify;

	@text-valign: top, middle, bottom;

	//  文本水平对齐
	each(@text-halign, {
  .text-halign--@{value} {
    text-align: @value;
    text-align-last: @value;
  }
});

	//  文本水平对齐
	each(@text-valign, {
  .text-valign--@{value} {
    vertical-align: @value;
  }
})

// 边框
.border {
		// 实线边框
		&--double {
			border-style: double;
		}

		// 点状边框
		&--dotted {
			border-style: dotted;
		}

		// 虚线边框
		&--dashed {
			border-style: dashed;
		}

		// 双线边框
		&--double {
			border-style: double;
		}
	}

	.wrap {
		&--warp {
			white-space: pre-wrap;
		}
		&--nowarp {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	// 文本绘制模式
	.render-mode {
		&--heading1 {
            display: block;
            font-size: 2em;
            margin-block-start: 0.67em;
            margin-block-end: 0.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading2 {
			display: block;
            font-size: 1.5em;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading3 {
			display: block;
            font-size: 1.17em;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
        &--heading4 {
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
        }
		&--heading5 {
            display: block;
            font-size: 0.83em;
            margin-block-start: 1.67em;
            margin-block-end: 1.67em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--heading6 {
            display: block;
            font-size: 0.67em;
            margin-block-start: 2.33em;
            margin-block-end: 2.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-weight: bold;
		}
		&--text {
			display: inline;
		}
		&--paragraph {
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
		}
	}
}
